.panel-custom > .panel-heading {
    font-weight: var(--bold);
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-size: 2.4rem;
}

.ui-datepicker-title select {
    min-width: 10rem !important;
    width: unset;
}

.gender__field {
    flex-flow: wrap !important;
}

    .gender__field .checkbox label {
        padding-right: 1rem !important;
        padding-left: 2rem !important;
        line-height: 2.4rem !important;
    }

.form__field--full textarea {
    width: 100%;
}

#ageValidationMsg,
#bsnValidationMsg {
    flex-direction: row;
}

    #ageValidationMsg span:first-child,
    #bsnValidationMsg span:first-child {
        margin-right: 1rem;
    }

.has-error {
    /*background-color: var( --error-color)*/
}

button.disabled {
    pointer-events: none;
}

.error {
    color: var( --error-color);
}

label.error {
    font-size: 1.6rem;
    font-weight: var(--regular);
    margin-top: 1rem;
}

p.error {
    font-weight: var(--regular);
}

div.warning {
    color: var(--warning-color);
    font-weight: var(--regular);
}

.date-picker .calendar {
    max-height: 0px;
}

.date-picker {
    /*overflow: initial !important;*/
    max-height: unset !important;
}

    .date-picker.open .calendar {
        max-height: unset;
    }

.form__field.buttons {
    flex-direction: row;
    gap: 1rem;
    flex: auto;
}

.newappointmentlink {
    text-align: center;
    margin-top: 2rem
}

.appointmentLinkText {
    cursor: pointer;
    text-decoration: underline;
}

#divbtnPrint {
    text-align: center;
    margin-top: 2rem
}

#ageErrorMsg,
.locationerror,
.validateAge
#ageValidationMsg span:first-child,
#bsnValidationMsg span:first-child,
.un-authorized-info {
    color: var( --error-color);
}

#SecondAppointmentDiv {
    margin-top: 2rem;
}

span.anchor-link {
    color: blue;
    text-decoration-line: underline;
}

.checkbox--disabled label {
    pointer-events: none;
}

input.error, textarea.error, select.error,
.has-error input {
    border-color: var( --error-color);
    border-width: 0.2rem;
}

.services__heading {
    flex-direction: column;
    align-items: flex-start;
}

.date-picker .ui-state-default:not(.ui-state-active) {
    color: var(--secondary-color);
    font-weight: 600;
}

.table tbody tr td {
    flex: 0 0 100%;
}

@media screen and (max-width: 500px) {
    input[type="search"], #labelforsearch {
        width: 100%;
    }
}

@media screen and (max-width: 380px) {
    .table tbody tr td {
        max-width: calc(100% - 10rem);
    }
}

@media screen and (max-width: 400px) {
    .table tbody tr td {
        max-width: calc(100% - 7rem);
    }
}

@media screen and (max-width: 430px) {
    .table tbody tr td {
        max-width: calc(100% - 5rem);
    }
}

@media screen and (max-width: 450px) {
    .table tbody tr td {
        max-width: calc(100% - 3rem);
    }
}

@media screen and (max-width: 470px) {
    .table tbody tr td {
        max-width: calc(100% - 1rem);
    }
}

@media (max-width:767px) {
    .form__field.buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.hide {
    display: none !important;
}

.right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

.visible {
    visibility: visible !important;
}

.pointernone {
    pointer-events: none !important;
}

.flexdisplay {
    display: flex !important;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

input[type="search"]::-ms-clear {
    display: none;
}

.appointmentdetails:not(.hide) + .page-footer {
    margin-top: 2rem;
}

/* landline code dropdown*/
@media (max-width: 850px) {
    .form__field .numberwithcode {
        width: 100%;
    }

        .form__field .numberwithcode .number {
            margin-top: 1.5rem;
        }
}

@media (min-width: 850px) {
    .form__field .numberwithcode {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: 100%;
    }

        .form__field .numberwithcode .code,
        .form__field .numberwithcode .number {
            display: flex;
            flex-direction: column;
        }

        .form__field .numberwithcode .code {
            width: 25%;
        }

        .form__field .numberwithcode .number {
            width: calc(75% - 1rem)
        }

    .dropdown-content {
        margin-top: 7.6rem;
    }
}


.dropdown-content {
    position: absolute;
    max-height: 20rem;
    overflow-y: auto;
    border: 0.1rem solid var(--gray-color-darker);
    border-radius: var(--border-radius);
    display: none;
    z-index: 1000 !important;
    background-color: var(--secondary-text-color);
}

    .dropdown-content div {
        padding: 1rem;
        cursor: pointer;
        display: flex;
    }

        .dropdown-content div span:last-child {
            float: right;
            margin-left: auto;
        }

        .dropdown-content div span:first-child {
            margin-right: 1rem;
            float: left;
            margin-left: initial;
        }

        .dropdown-content div:hover {
            background-color: var(--primary-color);
            color: var(--primary-text-color)
        }

.show {
    display: block !important;
}

@media (max-width: 600px) {
    .dropdown-content {
        max-width: calc(100% - 4rem);
    }
}

@media (max-width: 700px) {
    .dropdown-content {
        max-width: calc(100% - 6rem);
    }
}

@media (min-width: 701px) {
    .dropdown-content {
        max-width: calc(50% - 4rem)
    }
}

.landcode,
.land {
    z-index: 98;
    position: relative;
    width: 100%;
    height: auto;
    max-height: 4.5rem;
    background: white;
    overflow: hidden;
    transition: all 0.3s 0s ease-in-out;
}

    .landcode::before,
    .land::before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        height: 4.3rem;
        background: #FFF;
        border-radius: var(--border-radius);
    }

    .landcode::after,
    .land::after {
        content: "\EA09";
        z-index: 2;
        position: absolute;
        top: 2rem;
        right: .5rem;
        font-size: 0.7rem;
        color: var(--secondary-color);
    }

.disable {
    pointer-events: none;
    background-color: var(--btn-disabled-background);
}

.not_allowed {
    cursor: not-allowed;
}
.appointment__message {
    margin-bottom: 1rem;
}